﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link href="__ADMIN__/css/style.css" rel="stylesheet">

<style>
    .add-option {
        text-align: center;
        padding: 6px 0;
        border: 1px solid #e5e6e7;
        border-radius: 5px;
        cursor: pointer;
        color: #fff;
        background: #5FB878;
    }

    .del-box {
        padding-top: 8px;
    }

    .del {
        width: 25%;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #e5e6e7;
        border-radius: 20px;
        cursor: pointer;
        color: #fff;
        background: rgb(221, 107, 85);
    }
</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">提问（文字）</label>
                                <div class="col-sm-3">
                                    <textarea class="form-control" name="question_text" rows="8">{:json_decode($info.question, true)['text']}</textarea>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">提问（图片）</label>
                                <div class="col-sm-3">
                                    <input type="file" id="question_img_file" style="display: none">
                                    <input type="hidden" name="question_img" id="question_img" value="{:json_decode($info.question, true)['img']}"/>
                                    <img class="upload-file" onclick="uploadImg('question_img_file', 'question_img', 'upload_question_img')" id="upload_question_img" src="{:json_decode($info.question, true)['img'] ? getPicture(json_decode($info.question, true)['img']) : '__ADMIN__/img/uploadBtn.png'}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">选项类型</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="option_type" value="1" title="文字选项" lay-filter="option_type" {$info.option_type !=2 ? 'checked' : ''}>
                                    <input type="radio" name="option_type" value="2" title="图片选项" lay-filter="option_type" {$info.option_type== 2 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item" id="option-box">
                            <div class="form-group row option-row">
                                <label class="col-sm-1 col-form-label">选项</label>
                                <!--  文字选项  -->
                                <div class="col-sm-5 options text-option">
                                    <input type="text" class="form-control option" placeholder="请输入选项内容" onblur="changeOptionValue(this)">
                                </div>
                                <!--  图片选项  -->
                                <div class="col-sm-2 options img-option">
                                    <input type="file" id="option_img_file1" style="display: none">
                                    <input type="hidden" id="option_img1" value="{$info['img']|default=''}"/>
                                    <img class="upload-file" onclick="uploadOptionImg(this, 'option_img_file1', 'option_img1', 'option_upload_img1')" id="option_upload_img1" src="{$info.img ? getPicture($info.img) : '__ADMIN__/img/uploadBtn.png'}">
                                </div>
                                <!--  是否正确答案  -->
                                <div class="col-sm-1 layui-form option_checkbox" onclick="changeOption(this)">
                                    <input type="checkbox" lay-skin="switch" lay-text="对|错">
                                </div>
                                <!--  删除按钮  -->
                                <div class="col-sm-3 del-box">
                                    <div class="del" onclick="delOption(this)">删除</div>
                                </div>
                            </div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-5">
                                    <div class="add-option col-sm-12">新增选项</div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">解析</label>
                                <div class="col-sm-3">
                                    <textarea class="form-control" name="analysis" rows="8">{$info.analysis}</textarea>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" name="pid" value="{:input('pid')}">
                        <input type="hidden" name="option" value='{$info.option}' class="database-option">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script src="/static/layui/layui.js"></script>

<!--  选项js  -->
<script>
    var form;
    var option = `{$info.option}` ? JSON.parse(`{$info.option}`) : [{"key": "", "value": "", "answer": false}];
    var option_type = `{$info.option_type}` ? `{$info.option_type}` : 1;
    var id = `{:input('id')}` ? `{:input('id')}` : 0;
    var option_letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];

    layui.use('form', function () {
        form = layui.form, $ = layui.jquery;

        form.on('radio(option_type)', function (data) {
            option_type = data.value;
            judgeOptionType();
            form.render();
        });
    });

    renderOption();

    // 新增的时候才执行这行代码
    if (id === 0) judgeOptionType();

    function judgeOptionType() {
        option = [{"key": "", "value": "", "answer": false}];
        renderOption();
        if (option_type == 1) {
            $('.text-option').show();
            $('.img-option').hide();
        } else {
            $('.text-option').hide();
            $('.img-option').show();
        }
    }

    $('.add-option').click(function () {
        if (option_type == 1) {
            var option_html = '<div class="col-sm-5 options text-option">\n' +
              '                                    <input type="text" class="form-control option" placeholder="请输入选项内容" onblur="changeOptionValue(this)">\n' +
              '                                </div>'
        } else {
            var len = option.length + 1;
            var option_html = '<div class="col-sm-2 options img-option">\n' +
              '                                    <input type="file" id="option_img_file' + len + '" style="display: none">\n' +
              '                                    <input type="hidden" id="option_img' + len + '" value="{$info[\'img\']|default=\'\'}"/>\n' +
              '                                    <img class="upload-file" onclick="uploadOptionImg(this, \'option_img_file' + len + '\', \'option_img' + len + '\', \'option_upload_img' + len + '\')"\n' +
              '                                         id="option_upload_img' + len + '"\n' +
              '                                         src="__ADMIN__/img/uploadBtn.png">\n' +
              '                                </div>';
        }
        var html = '<div class="form-group row option-row">\n' +
          '                                <label class="col-sm-1 col-form-label">选项</label>\n' +
          '                                ' + option_html + '\n' +
          '                                <div class="col-sm-1 layui-form option_checkbox" onclick="changeOption(this)">\n' +
          '                                    <input type="checkbox" lay-skin="switch" lay-text="对|错">\n' +
          '                                </div>\n' +
          '                                <div class="col-sm-3 del-box">\n' +
          '                                    <div class="del" onclick="delOption(this)">删除</div>\n' +
          '                                </div>\n' +
          '                            </div>';
        $('#option-box').append(html);

        option.push({"key": "", "value": "", "answer": false});

        updateOptionInput();

        form.render();
    })

    function updateOptionInput() {
        $.each(option, (k, v) => {
            option[k].key = option_letter[k];
        })

        $('.database-option').val(JSON.stringify(option))
    }

    function delOption(that) {
        var index = $('.del').index(that);
        $('.option-row').eq(index).remove();

        option.splice(index, 1);

        updateOptionInput();
    }

    function changeOptionValue(that) {
        var index = $('.option').index(that);
        var value = $(that).val();

        option[index].value = value;

        updateOptionInput();
    }

    function changeOption(that) {
        var index = $('.option_checkbox').index(that);
        var is_true = $('#option-box .layui-form-switch').eq(index).find('em').html() === '正确' ? true : false;

        option[index].answer = is_true;

        updateOptionInput();
    }

    /**
     * option: [{"key": "A", "value": "A选项的内容", "answer": true}, {"key": "B", "value": "B选项的内容", "answer": false}]
     * */
    function renderOption() {
        var html = '';
        $.each(option, (key, val) => {
            if (option_type == 1) {
                var option_html = '<div class="col-sm-5 options text-option">\n' +
                  '                                    <input type="text" class="form-control option" placeholder="请输入选项内容" value="' + val.value + '" onblur="changeOptionValue(this)">\n' +
                  '                                </div>'
            } else {
                var img_id = val.value;

                var option_html = '<div class="col-sm-2 options img-option">\n' +
                  '                                    <input type="file" id="option_img_file' + (key + 1) + '" style="display: none">\n' +
                  '                                    <input type="hidden" id="option_img' + (key + 1) + '" value="' + img_id + '"/>\n' +
                  '                                    <img class="upload-file" onclick="uploadOptionImg(this, \'option_img_file' + (key + 1) + '\', \'option_img' + (key + 1) + '\', \'option_upload_img' + (key + 1) + '\')"\n' +
                  '                                         id="option_upload_img' + (key + 1) + '"\n' +
                  '                                         src="' + (img_id ? val.value : '__ADMIN__/img/uploadBtn.png') + '">\n' +
                  '                                </div>';
            }

            var selected = val.answer ? 'checked' : '';
            html += '<div class="form-group row option-row">\n' +
              '                                <label class="col-sm-1 col-form-label">选项</label>\n' +
              '                                ' + option_html + '\n' +
              '                                <div class="col-sm-1 layui-form option_checkbox" onclick="changeOption(this)">\n' +
              '                                    <input type="checkbox" lay-skin="switch" lay-text="对|错" ' + selected + '>\n' +
              '                                </div>\n' +
              '                                <div class="col-sm-3 del-box">\n' +
              '                                    <div class="del" onclick="delOption(this)">删除</div>\n' +
              '                                </div>\n' +
              '                            </div>';
        })

        $('#option-box').html(html);
    }

    /**
     * 选项单图上传
     * @param    file_id        file上传按钮id
     * @param    img            图片id隐藏域
     * @param    img_btn        图片上传按钮id
     * */
    function uploadOptionImg(that, file_id, img, img_btn) {
        var index = $('.upload-file').index(that);
        $("#" + file_id).trigger("click");
        $('#' + file_id).change(function () {
            var pic = $(this)[0].files[0];
            var formData = new FormData();
            var url = "/Upload/UploadFile/uploadPicture";
            formData.append('download', pic);
            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status == 1) {
                        clearFile(file_id);

                        //上传成功
                        var path = data.data.path;

                        $('#' + img).val(path);
                        $('#' + img_btn).attr('src', path);

                        option[index - 1].value = path;

                        updateOptionInput();
                    } else {
                        layer.msg(data.info);
                    }
                }
            });
        });
    }
</script>{/block}
